<template>

  <view>
    <nut-navbar
      @on-click-back="back"
      @on-click-title="title"
      @on-click-right="rightClick"
      title="新增药品"
    >
    </nut-navbar>
  </view>

  <nut-input 
    v-model="state.text" 
    label="药品名称" 
    placeholder="请输入药品名称" 
  />

  <nut-cell title="请选择药品" :desc="desc" @click="()=>{show=true}"></nut-cell>
  <nut-picker
    v-model:visible="show"
    :columns="columns"
    title="药品选择"
    @change="change"
    @confirm="confirm"
  >
  </nut-picker>

</template>

<script>
import { reactive, toRefs, ref } from 'vue';
// taro
import { Navbar,Icon,Tabs, TabPane, Switch } from '@nutui/nutui-taro';
import { url } from 'inspector';
import { log } from 'console';
import { method, union } from 'lodash';
import { useRouter } from '@tarojs/taro';
export default {
  name: 'Index',
  components: {
    
  },
  setup(props){
    const router = useRouter();
    const state = reactive({
      msg: '欢迎使用 NutUI3.0 开发小程序',
      msg2: '你成功了～',
      type: 'text',
      show: false,
      cover: false,

      options1: [
        { text: '位置', value: 0 },
        { text: '在院', value: 1 },
        { text: '居家', value: 2 }
      ],
      options2: [
        { text: '默认排序', value: 'a' },
        { text: '输注进度排序', value: 'b' },
        { text: '无效次数排序', value: 'c' },
        { text: '泵电量排序', value: 'd' },
      ],
      options3: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      value1: 0,
      value2: 'a',
      value3: 'b'
    });

    const show = ref(false);
      const desc = ref('');
      const columns = ref([
        { text: '阿司匹林儿童片（mg）', value: 'asipilin' },
        { text: '贝尔斯登（mg）', value: 'beiersi' },
        { text: '阿司匹林儿童片（mg）', value: 'asipilin' },
        { text: '贝尔斯登（mg）', value: 'beiersi' },
        { text: '贝尔斯登（mg）', value: 'beiersi' },
        { text: '贝尔斯登（mg）', value: 'beiersi' },
        { text: '贝尔斯登（mg）', value: 'beiersi' }
      ]);

    const handleClick = (type, msg, cover = false) => {
      state.show = true;
      state.msg2 = msg;
      state.type = type;
      state.cover = cover;
    };

    const checked = ref(true);

    const handleChange = val => {
      console.log('val', val);
    }

    const toMessage = () => {
      console.log('跳转到详情页')
      console.log('router.path', router)
    }

    const confirm = ( { selectedValue,selectedOptions })=>{
        desc.value = selectedValue.join(',');
      }
      const change = ({ selectedValue,selectedOptions }) => {
        console.log(selectedValue);
      };

    return {
      ...toRefs(state),
      handleClick,
      checked,
      state,
      handleChange,
      toMessage,
      show,
      desc,
      columns,
      change, 
      confirm
    }
  }
}
</script>

<style lang="scss">
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
